﻿(function ($) {

  var enableLineConection = function ($item) {
        $item.click(function () {
        var ox = $item.attr('offsetLeft');
        var oy = $item.attr('offsetTop');
        var ow = $item.attr('offsetWidth');
        var oh = $item.attr('offsetHeight');

        a = ox;
        b = oy;

        if (isline == 0) {
            size1 = size;
            $("#container").drawlineFunctions({
                lineIndex:linenum
            })
            $("#container").setlineFunctions({
                startx: a,
                starty: b,
           
                endx: a,
                endy: b,
                startsize: size1,
                endsize: size1,
                lineIndex: linenum
            
            });
        
            $("#container").bind('mousemove',
                    function (e) {
                        x = e.pageX;
                        y = e.pageY - $("#container").get(0).offsetTop;
                        $("#container").setlineFunctions({
                            endx: x,
                            endy: y,
                            startx: a,
                            starty: b,
                            startsize: size1,
                            endsize: size1,
                            lineIndex: linenum,
                        
                        });
    //                    
                    });
                    $("#container").find(".line" + lineIndex + "").each(function () {
                        var $this = $(this);
                        $this.attr("startx", $ul.id);

                        $this.attr("endx", $ul.id);
                    });
            isline = 1;
            currentline = linenum;
            isclear = 1;
            rightcilckline()
        }
        else if (isstartline == 1) {

            isstartline = 0;
            isline = 0
            $("#container").unbind('mousemove');

            $("#container").find(".line" + currentline + "").each(function () {
                var $this = $(this);
                $this.attr("startx", $ul.id);
                px = $this.attr("startx");
                py = $this.attr("endx")
            });
            if (px == py) {
                isline = 0;
                $(".line" + currentline + "").remove();

            }
            findsame(currentline);
            updateLinePosition($ul)
            rightcilckline()

        }
        else if (isendline == 1) {
            isendline = 0;
            isline = 0
            $("#container").unbind('mousemove');

            $("#container").find(".line" + currentline + "").each(function () {
                var $this = $(this);
                $this.attr("endx", $ul.id);
                px = $this.attr("startx");
                py = $this.attr("endx");

            });
            if (px == py) {
                isline = 0;
                $(".line" + currentline + "").remove();

            }
            findsame(currentline);
            updateLinePosition($ul)
            rightcilckline()
        }
        else {
            $("#container").find(".line" + currentline + "").each(function () {
                var $this = $(this);
                $this.attr("endx", $ul.id);
                px = $this.attr("startx");

            }); 
        
            $("#container").unbind('mousemove');
            $("#container").find(".line" + currentline + "").each(function () {
                var $this = $(this);
                px = $this.attr("startx");
                py = $this.attr("endx");

            });

            if (px == py) {
                $(".line" + currentline + "").remove();
                linenum -= 1;
            }
            findsame(currentline);
            isline = 0;
            linenum += 1;
            updateLinePosition($ul)
            rightcilckline()
        }
       // setlinelocation($item, item, childDiv, size)
    
    });
}



function updateLinePosition($ul) {
    var px, py;
    var i;
    for (i = 0; i < linenum; i++) {

        $("#container").find(".line" + i + "").each(function () {
            var $this = $(this);
            px = $this.attr("startx");

            py = $this.attr("endx");

        });
        if (px == $ul.id || py == childDiv.id) {
            if (isendline == 0 && isstartline == 0 && isline == 0) {
                fl = findlen(i);
                a = fl.a;
                b = fl.b;
                x = fl.x;
                y = fl.y;
                size1 = fl.size1;
                size2 = fl.size2;
                $("#container").setlineFunctions({
                    endx: x,
                    endy: y,
                    startx: a,
                    starty: b,
                    startsize: size1,
                    endsize: size2,
                    lineIndex: i
                    
                });
            }
        }

    }

}


function findlen(i) {

    $("#container").find(".line" + i + "").each(function () {
        var $this = $(this);
        px = $this.attr("startx");

        py = $this.attr("endx");

    });

    $px = $("#" + px + "").get(0);
    $py = $("#" + py + "").get(0);

    $ppx = $("#" + px + "");
    $ppy = $("#" + py + "");
    a = $px.offsetLeft;
    b = $px.offsetTop;
    x = $py.offsetLeft;
    y = $py.offsetTop;

    var nod1, nod2, nods, node;
    var len, minlen;
    minlen = (a - x) * (a - x) + (b - y) * (b - y);
    $ppx.find('.container_interface_left, .container_interface_top, .container_interface_right, .container_interface_bottom').each(
                function () {
                    nod1 = this;

                    $ppy.find('.container_interface_left, .container_interface_top, .container_interface_right, .container_interface_bottom').each(
                    function () {
                        nod2 = this;

                        nodh = Math.abs(nod1.offsetLeft + $px.offsetLeft - nod2.offsetLeft - $py.offsetLeft);
                        nodv = Math.abs(nod1.offsetTop + $px.offsetTop - nod2.offsetTop - $py.offsetTop);
                        len = nodh * nodh + nodv * nodv;
                        if (len <= minlen) {
                            minlen = len;
                            nods = nod1;
                            node = nod2;
                        }
                    });
                });
    if (nods.id == "container_interface_left" || nods.id == "container_interface_right") { size1 = "v"; }
    if (nods.id == "container_interface_top" || nods.id == "container_interface_bottom") { size1 = "h"; }

    if (node.id == "container_interface_left" || node.id == "container_interface_right") { size2 = "v"; }
    if (node.id == "container_interface_top" || node.id == "container_interface_bottom") { size2 = "h"; }

    a = nods.offsetLeft + $px.offsetLeft;
    b = nods.offsetTop + $px.offsetTop;


    x = $py.offsetLeft + node.offsetLeft;
    y = $py.offsetTop + node.offsetTop;
    
    return { a: a, b: b, x: x, y: y, size1: size1, size2: size2 };

}
function findstartline(i) {


    isline = 1;
    isstartline = 1;

    fl = findlen(i);
    a = fl.a;
    b = fl.b;
    x = fl.x;
    y = fl.y;
    
    size1 = fl.size2;
    size2 = size1;

    $("#container").bind('mousemove',
            function (e) {


                a1 = e.pageX;
                b1 = e.pageY - $("#container").get(0).offsetTop;
                $("#container").setlineFunctions({
                    endx: x,
                    endy: y,
                    startx: a1,
                    starty: b1,
                    startsize: size1,
                    endsize: size2,
                    lineIndex: i
                    
                });


            });

    startid = i;

    currentline = startid;
    rightcilckline()
}
function findendline(i) {

    isline = 1;
    isendline = 1;



    fl = findlen(i);
    a = fl.a;
    b = fl.b;
    x = fl.x;
    y = fl.y;
    
    size2 = fl.size1;
    size1 = size2;
    
    $("#container").bind('mousemove',
    function (e) {


        a1 = e.pageX;
        b1 = e.pageY - $("#container").get(0).offsetTop;

        $("#container").setlineFunctions({
                    endx: a1,
                    endy: b1,
                    startx: a,
                    starty: b,
                    startsize: size1,
                    endsize: size2,
                    lineIndex: i
                    
                });

    });
    endid = i;

    currentline = endid;
    rightcilckline()
}
function findsame(i) {
    var currentstart, currentend, px, py;
    $("#container").find(".line" + i + "").each(function () {
        var $this = $(this);
        currentstart = $this.attr("startx");
        currentend = $this.attr("endx");

    });
    for (var p = 0; p < linenum; p++) {
        $("#container").find(".line" + p + "").each(function () {
            var $this = $(this);
            px = $this.attr("startx");
            py = $this.attr("endx");

        });
        if (px == currentstart && py == currentend && i != p) {
            $(".line" + p + "").remove();
        }

    }
}


    var drawline = function (target, settings) {
        var $target = target;
lineIndex =settings.lineIndex
		fline = "<div class='line line" + lineIndex + " fline" + lineIndex + "'><div>"
    sline = "<div class='line line" + lineIndex + " sline" + lineIndex + "'><div>"
    tline = "<div class='line line" + lineIndex + " tline" + lineIndex + "'><div>"
    arrow = "<div id='line" + lineIndex + "' class='line line" + lineIndex + " arrow" + lineIndex + "'><div>"
    node = "<div id='line" + lineIndex + "' class='line line" + lineIndex + " node" + lineIndex + "'><div>"
    $target = $("#container")

    dialog = '<div id="dialog_condition' + lineIndex + '"><fieldset><legend>条件编辑</legend></fieldset><table><tr><td>条件1</td><td><input id="txtConmain" type="text"/></td></tr><tr><td>条件2</td><td><input id="concheck" type="text"/></td></tr><tr><td>条件3</td><td><input id="txtConassist" type="text"/></td></tr></table></div>'
    $target.append(dialog)
    $target.append(fline);
    $target.append(sline);
    $target.append(tline);
    $target.append(arrow);
    $target.append(node);
    $(".arrow" + lineIndex + "").append("<img class='arrowout" + lineIndex + "'   />");
    $(".node" + lineIndex + "").append("<img class='nodeout" + lineIndex + "'   />");
    $arrow = $(".arrow" + lineIndex + "");
    $node = $(".node" + lineIndex + "");
    $node.find(".nodeout" + settings.lineIndex + "").click(function () {

        findstartline(settings.lineIndex);

    });
    $arrow.find(".arrowout" + settings.lineIndex + "").click(function () {


        findendline(settings.lineIndex);

    });
    $target.find(".line" + settings.lineIndex + "").dblclick(function () {


        var $dialog = $("#dialog_condition" + settings.lineIndex + "");
        var $txt1 = $dialog.find("#txt1");
        var $txt2 = $dialog.find("#txt2");
        var $txt3 = $dialog.find("#txt3");
        
        var $this = $(this);
        var mode = $this.attr('conditionUpdateMode');
        if (mode) {
            $this.attr("conditionUpdateMode", "editing");

            $txt1.val($this.attr("txt1"));
            $txt2.val($this.attr("txt2"));
            $txt3.val($this.attr("txt3"));

        }
        else {
            $this.attr("conditionUpdateMode", "create");
            $txt1.val($this.attr(""));
            $txt2.val($this.attr(""));
            $txt3.val($this.attr(""));
         
        }
        $("#dialog_condition" + settings.lineIndex + "").dialog("open");


    });
    $("#dialog_condition" + settings.lineIndex + "").dialog({
        autoOpen: false,
        show: "drop",
        hide: "drop",
        height: 600,
        width: 600,
        modal: true,
        buttons: {
            "保存": function () {
                var itemTarget = $(".line" + settings.lineIndex + "");
                var $dialog = $("#dialog_condition" + settings.lineIndex + "");

                var txt1 = $dialog.find("#txt1").val();
                itemTarget.attr("txt1", txt1);
                var txt2 = $dialog.find("#txt2").val();
                itemTarget.attr("txt2", txt2);
                var txt3 = $dialog.find("#txt3").val();
                itemTarget.attr("txt3", txt3);


                itemTarget.attr('conditionUpdateMode', "updated");
                $(this).dialog("close");

            },
            "取消": function () {
                $(this).dialog("close");
            }
        },
        close: function () {
        }
    });

        }

        function drawlines(lineIndex) {
    fline = "<div class='line line" + lineIndex + " fline" + lineIndex + "'><div>"
    sline = "<div class='line line" + lineIndex + " sline" + lineIndex + "'><div>"
    tline = "<div class='line line" + lineIndex + " tline" + lineIndex + "'><div>"
    arrow = "<div id='line" + lineIndex + "' class='line line" + lineIndex + " arrow" + lineIndex + "'><div>"
    node = "<div id='line" + lineIndex + "' class='line line" + lineIndex + " node" + lineIndex + "'><div>"
    $container = $("#container")

    dialog = '<div id="dialog_condition' + lineIndex + '"><fieldset><legend>条件编辑</legend></fieldset><table><tr><td>条件1</td><td><input id="txtConmain" type="text"/></td></tr><tr><td>条件2</td><td><input id="concheck" type="text"/></td></tr><tr><td>条件3</td><td><input id="txtConassist" type="text"/></td></tr></table></div>'

    $container.append(dialog)
    $container.append(fline);
    $container.append(sline);
    $container.append(tline);
    $container.append(arrow);
    $container.append(node);
    $(".arrow" + lineIndex + "").append("<img class='arrowout" + lineIndex + "'   />");
    $(".node" + lineIndex + "").append("<img class='nodeout" + lineIndex + "'   />");
    $arrow = $(".arrow" + lineIndex + "");
    $node = $(".node" + lineIndex + "");
    $node.find(".nodeout" + lineIndex + "").click(function () {

        findstartline(lineIndex);

    });
    $arrow.find(".arrowout" + lineIndex + "").click(function () {


        findendline(lineIndex);

    });
    $container.find(".line" + lineIndex + "").dblclick(function () {


        var $dialog = $("#dialog_condition" + lineIndex + "");
        var $txt1 = $dialog.find("#txt1");
        var $txt2 = $dialog.find("#txt2");
        var $txt3 = $dialog.find("#txt3");

        var $this = $(this);
        var mode = $this.attr('conditionUpdateMode');
        if (mode) {
            $this.attr("conditionUpdateMode", "editing");

            $txt1.val($this.attr("txt1"));
            $txt2.val($this.attr("txt2"));
            $txt3.val($this.attr("txt3"));

        }
        else {
            $this.attr("conditionUpdateMode", "create");
            $txt1.val($this.attr(""));
            $txt2.val($this.attr(""));
            $txt3.val($this.attr(""));

        }
        $("#dialog_condition" + lineIndex + "").dialog("open");


    });
    $("#dialog_condition" + lineIndex + "").dialog({
        autoOpen: false,
        show: "drop",
        hide: "drop",
        height: 600,
        width: 600,
        modal: true,
        buttons: {
            "保存": function () {
                var itemTarget = $(".line" + lineIndex + "");
                var $dialog = $("#dialog_condition" + lineIndex + "");

                var txt1 = $dialog.find("#txt1").val();
                itemTarget.attr("txt1", txt1);
                var txt2 = $dialog.find("#txt2").val();
                itemTarget.attr("txt2", txt2);
                var txt3 = $dialog.find("#txt3").val();
                itemTarget.attr("txt3", txt3);


                itemTarget.attr('conditionUpdateMode', "updated");
                $(this).dialog("close");

            },
            "取消": function () {
                $(this).dialog("close");
            }
        },
        close: function () {
        }
    });


}


function setline(fromX, fromY, toX, toY, lineIndex, item, size1, size2, chis, chie) {
    var beginway = 1;
    var style;
    var start = { x: fromX, y: fromY };
    var end = { x: toX, y: toY };
    var chi = { x: chis, y: chie };
    var size = { x: size1, y: size2 };
    ox = item.offsetLeft;
    oy = item.offsetTop;
    ow = item.offsetWidth;
    oh = item.offsetHeight;

    $fline = $(".fline" + lineIndex + "");
    $sline = $(".sline" + lineIndex + "");
    $tline = $(".tline" + lineIndex + "");
    $arrow = $(".arrow" + lineIndex + "");
    $node = $(".node" + lineIndex + "");
    $container = $("#container")
    var exow, exoh; ;







    function setup() {
        $(".line" + lineIndex + "").css({ opacity: 1, marginLeft: start.x + 'px', marginTop: start.y + 'px', position: "absolute", zIndex: 100 });
        $arrow.css({ opacity: 1 })
        $node.css({ opacity: 0.9 })
        $("#container").find(".line" + lineIndex + "").each(function () {
            var $this = $(this);
            //            setstartposition($this);
            $this.attr("startx", chi.x);

            $this.attr("endx", chi.y);
            px = $this.attr("startx");

            py = $this.attr("endx");

        });
        if (end.x >= start.x) {
            exow = ow;
        } else {
            exow = -ow;

        }
        if (end.y >= start.y) { exoh = oh; } else { exoh = -oh; }

        if (size.x == "v" && size.y == "v") {
            style = 1;
            writenode();
            setline(start.x + exow, start.y, (start.x + end.x) / 2, start.y, $fline);
            setline((start.x + end.x) / 2, start.y, (start.x + end.x) / 2, end.y, $sline);
            setline((start.x + end.x) / 2, end.y, end.x - exow, end.y, $tline);
            writearrow()

        }
        else if (size.x == "h" && size.y == "h") {
            style = 2;
            writenode();
            setline(start.x, start.y + exoh, start.x, (start.y + end.y) / 2, $fline);
            setline(start.x, (start.y + end.y) / 2, end.x, (start.y + end.y) / 2, $sline);
            setline(end.x, (start.y + end.y) / 2, end.x, end.y - exoh, $tline);
            writearrow()

        }
        else if (size.x == "h" && size.y == "v") {
            style = 3;
            writenode();
            setline(start.x, start.y + exoh, start.x, end.y, $fline);
            setline(start.x, end.y, end.x - exow, end.y, $sline);
            setline(end.x, end.y, end.x, end.y, $tline)
            writearrow()

        }
        else if (size.x == "v" && size.y == "h") {
            style = 4;
            writenode();
            setline(start.x + exow, start.y, end.x, start.y, $fline);
            setline(end.x, start.y, end.x, end.y - exoh, $sline);
            setline(end.x, end.y, end.x, end.y, $tline)
            writearrow()

        }

    }

    function setline(sx, sy, ex, ey, $line) {
        if (sx == ex) {
            if ((start.x - end.x) * (start.y - end.y) < 0) {
                sy = sy + 7;
                ey = ey + 7;
            }
            if (sy > ey) {
                $line.css({ left: (sx - start.x + (ow / 2)) + 'px', top: (sy - start.y + (oh / 2 - (sy - ey))) + 'px', width: 7 + 'px', height: (sy - ey) + 'px' });
            } else {
                $line.css({ left: (sx - start.x + (ow / 2)) + 'px', top: (sy - start.y + oh / 2) + 'px', width: 7 + 'px', height: (ey - sy) + 'px' });
            }
            $line.css({ backgroundImage: 'url(/images/con4_left_bg1.GIF)' });
        } else if (sy == ey) {
            if (sx > ex) {
                $line.css({ left: (sx - start.x + (ow / 2 - (sx - ex))) + 'px', top: (sy - start.y + oh / 2) + 'px', width: (sx - ex) + 'px', height: 7 + 'px' });
            } else {
                $line.css({ left: (sx - start.x + ow / 2) + 'px', top: (sy - start.y + oh / 2) + 'px', width: (ex - sx) + 'px', height: 7 + 'px' });
            }
            $line.css({ backgroundImage: 'url(/images/con4_left_bg1.GIF)' });
        }

    }



    function writearrow() {
        var a, b;
        if (style == 1 && end.x >= start.x || style == 3 && end.x >= start.x) {
            a = -15 - ow / 2; b = -4; beginway = 1;
        } else if (style == 1 && end.x < start.x || style == 3 && end.x < start.x) {
            a = -4 + ow / 2; b = -4; beginway = 3;
        } else if (style == 2 && end.y >= start.y || style == 4 && end.y >= start.y) {
            a = -4; b = -15 - oh / 2; beginway = 2;
        } else if (style == 2 && end.y < start.y || style == 4 && end.y < start.y) {
            a = -4; b = -4 + oh / 2; beginway = 4;
        }
        $arrow.css({ left: (end.x - start.x + a + ow / 2) + 'px', top: (end.y - start.y + b + oh / 2) + 'px', width: 21 + 'px', height: 21 + 'px' });

        $arrow.find(".arrowout" + lineIndex + "").each(function () { this.src = '/images/jtbq' + beginway + '.png'; });
    }


    function writenode() {
        var a, b
        if (style == 1 && end.x >= start.x || style == 4 && end.x >= start.x) {
            a = 0 + ow / 2; b = -4;
        } else if (style == 1 && end.x < start.x || style == 4 && end.x < start.x) {
            a = -15 - ow / 2; b = -4;
        } else if (style == 2 && end.y >= start.y || style == 3 && end.y >= start.y) {
            a = -4; b = 0 + oh / 2;
        } else if (style == 2 && end.y < start.y || style == 3 && end.y < start.y) {
            a = -4; b = -15 - oh / 2;
        }
        $node.css({ left: (a + ow / 2) + 'px', top: (b + oh / 2) + 'px', width: 21 + 'px', height: 21 + 'px' });
        $node.find(".nodeout" + lineIndex + "").each(function () { this.src = '/images/jw.PNG'; });
    }
    return { updateEnd: function (a, b, size1, size2, c, d) {
        size.x = size1;
        size.y = size2;
        end.x = a;
        end.y = b;
        chi.y = c;
        lineIndex = d;
        setup();
        return this;
    }, updateStart: function (a, b, size1, size2, c, d) {
        size.x = size1;
        size.y = size2;
        start.x = a;
        start.y = b;
        chi.x = c;
        lineIndex = d;
        setup();
        return this;
    }

    };
}
    jQuery.fn.drawlineFunctions = function (options) {
        settings = jQuery.extend({
	    lineIndex:0
        }, options);
        drawline(this, settings);
        return this;
    };

    jQuery.fn.enableLineConection = function (options) {
        settings = jQuery.extend({
        }, options);
        enableLineConection($(this));
        return this;
    };
    
})(jQuery);


